<template>
  <div class="prohibit">
    <div class="img">
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img_hcq.jpg" v-if="type==1">
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img_jhq.png" v-if="type==2">
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img_jxq.jpg" v-if="type==3">
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/img_kqxq.jpg" v-if="type==4">
    </div>
    <div class="content" v-if="type==1">
      <div class="tip">不可在还车范围外还车</div>
      <div class="tips">请在地图标注范围内还车</div>
      <div class="button"><button class="btn pass" @click="back()">我知道了</button></div>
    </div>
    <div class="content" v-if="type==2">
      <div class="tip">风控区域外不可骑行</div>
      <div class="tips">您已超出风控区域，车辆已自动断电 <br> 如需继续骑行，需推回风控区域内再解锁骑行</div>
      <div class="button"><button class="btn pass" @click="back()">查看风控区域</button></div>
    </div>
    <div class="content" v-if="type==3">
      <div class="tip">已进入禁行区域</div>
      <div class="tips">禁行区域内不允许骑行穿越 <br> 否则车辆将断电</div>
      <div class="button"><button class="btn pass" @click="back()">我知道了</button></div>
    </div>
    <div class="content" v-if="type==4">
      <div class="tip">已进入禁还区域</div>
      <div class="tips">小区、学校等封闭区域内不可还车<br> 请前往还车区域内还车 </div>
      <div class="button"><button class="btn pass" @click="back()">我知道了</button></div>
    </div>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        type: 1 //1:还车区外不可还车 2:风控区域外不可骑行 3:进入禁行区域
      }
    },
    onLoad(options) {
      this.type = options.type
    },
    onUnload() {
      let noProhibit = 'noProhibit' + this.type
      wx.setStorageSync(noProhibit, true);
    },
    methods: {
      back() {
        let noProhibit = 'noProhibit' + this.type
        wx.setStorageSync(noProhibit, true);
        wx.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  .prohibit
    .content
      padding 0 50px
      text-align center
      .tip
        padding 120px 0 30px
        font-size 46px
        color: #FF0707
        line-height: 65px
      .tips
        line-height: 56px
        font-size 32px
        color: #666666
      .button
        .btn
          display: inline-block
          margin-top 216px
          margin-bottom 0px
    .img
      img
        width 100%
        height 520px
</style>
